import patchVnode from './patchVnode'
import createElem from './createElement'
// 判断是否是同一个虚拟节点
function checkSameVnode(a,b){
  return a.sel == b.sel && a.key == b.key
}
export default function undateChildren(parentElm,oldCh,newCh){
  console.log('updataChildren')
  // 旧前
  let oldStartIdx = 0
  // 新前
  let newStartIdx = 0
  // 旧后
  let oldEndIdx = oldCh.length - 1
  // 新后
  let newEndIdx = newCh.length - 1
  // 旧前节点
  let oldStartVnode = oldCh[0]
  // 旧后节点
  let oldEndVnode = oldCh[oldEndIdx]
  // 新前节点
  let newStartVnode = newCh[0]
  // 新后节点
  let newEndVnode = newCh[newEndIdx]

  let keyMap = null

  // 开始大while
  while(oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx){
    console.log('*')
    // 首先不是判断1234民众，而是要略过已经加undefined标记的东西
    if(oldStartVnode == null || oldCh[oldStartIdx] == undefined){
      oldStartVnode = oldCh[++oldStartIdx]
    }else if(oldEndVnode == null || oldCh[oldEndIdx] == undefined){
      oldEndVnode = oldCh[--oldEndIdx]
    }else if(newStartVnode == null || newCh[newStartIdx] == undefined){
      newStartVnode = newCh[++newStartIdx]
    }else if(newEndVnode == null || newCh[newEndIdx] == undefined){
      newEndVnode = newCh[--newEndIdx]
    }else if(checkSameVnode(oldStartVnode,newStartVnode)){
      console.log('①新前和旧前命中')
      patchVnode(oldStartVnode,newStartVnode)
      oldStartVnode = oldCh[++oldStartIdx]
      newStartVnode = newCh[++newStartIdx]
    }else if(checkSameVnode(oldEndVnode,newEndVnode)){
      console.log('②新后和旧后命中')
      patchVnode(oldEndVnode,newEndVnode)
      oldEndVnode = oldCh[--oldEndIdx]
      newEndVnode = newCh[--newEndIdx]
    }else if(checkSameVnode(oldStartVnode,newEndVnode)){
      console.log('③新后和旧前命中')
      patchVnode(oldStartVnode,newEndVnode)
      parentElm.insertBefore(oldStartVnode.elm,oldEndVnode.elm.nextSibling())
      oldStartVnode = oldCh[++oldStartIdx]
      newEndVnode = newCh[--newEndIdx]
    }else if(checkSameVnode(oldEndVnode,newStartVnode)){
      console.log('④新前和旧后命中')
      patchVnode(oldEndVnode,newStartVnode)
      parentElm.insertBefore(oldEndVnode.elm,oldStartVnode.elm)
      oldEndVnode = oldCh[--oldEndIdx]
      newStartVnode = newCh[++newStartIdx]
    }else{
      // 都没有匹配到
      // 制作keyMap䘝映射对象，这样就不用每次都遍历老对象了
      if(!keyMap){
        keyMap = {}
        // 从oldStartIdx开始，到oldEndIdx结束，去创建keyMap
        for(let i = oldStartIdx;i <= oldEndIdx;i++){
          const key = oldCh[i].key
          if(key != undefined){
            keyMap[key] = i
          }
        }
      }
      // 寻找当前这项（newStartIdx）这项在keyMap中的映射的位置序号
      const idxInOld = keyMap[newStartVnode.key]
      if(idxInOld==undefined){
        // 判断，如果idxInOld是undefined表示它是全新的项
        // 被加入的项（就是newStartVnode这项）现在不是真正的DOM节点
        parentElm.insertBefore(createElem(newStartVnode),oldEndVnode.elm)
      }else{
        // 如果不是undefined,不是全新的项
        const elmToMove = oldCh[idxInOld]
        patchVnode(elmToMove,newStartVnode)
        // 把这项设置为undefined表示我已经处理完这项了
        oldCh[idxInOld] = undefined
        // 移动，调用insertBefore也可以实现移动
        parentElm.insertBefore(elmToMove.elm,oldStartVnode.elm)
      }
      // 指针下移，只移动新的头
      newStartIdx++
    }
  }
  // 继续看看有没有剩余，循环结束了start还是小于old
  if(newStartIdx <= newEndIdx){
    console.log('new还有剩余')
    // const before = newCh[newEndIdx + 1] == null ? null : newCh[newEndIdx + 1].elm
    for(let i=newStartIdx;i<=newEndIdx;i++){
      parentElm.insertBefore(createElem(newCh[i]),oldCh[oldStartIdx].elm)
    }
  }else if(oldStartIdx <= oldEndIdx){
    for(let i=oldStartIdx;i<=oldEndIdx;i++){
      if(oldCh[i]){
        parentElm.removeChild(oldCh[i].elm)
      }
    }
  }
}